<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
   <title>Java Chips</title>
   <meta name="author" content="The Author"></meta>
</h:head>
<!-- Add 50px padding top to the body for the navbar -->
<h:body style="padding-top: 50px; padding-bottom: 20px;">
   <ui:insert name="navbar">
      <ui:include src="/templates/navbar.xhtml"></ui:include>
   </ui:insert>


   <h:form>

         <h:panelGrid columns="2" cellpadding="5" style="margin: 0 auto;">
            <b:image value="15415978_1516279895054222_939886978_n.png"/>
            <b:inputText placeholder="Search for products">
               <f:facet name="append">
                  <b:iconAwesome name="search" />
                  <b:commandButton type="submit" class="btn btn-default">Search</b:commandButton>
               </f:facet>
            </b:inputText>
         </h:panelGrid>

      <h:form>
         <h3>Welcome back, Rappu!</h3>
      </h:form>

      <ul>
         <li>ID: </li>
         <li>Username: </li>
         <li>Name: </li>
         <li>Home Address: </li>
         <li>Ship Address: </li>
         <li>Age: </li>
         <li>Email: </li>
      </ul>

      <b:carousel id="wizard" styleClass="wizardPseudoClass"
               style="width:1525px;height:1300px;padding-top:98px"
               startAnimation="false"
               showIndicators="false"
               wrap="false">
   <b:carouselItem style="width:1540px;height:1000px">
         <b:panel title="Featured Items" look="primary">
            <h:dataTable var="product" value="#{productBean.products}">
               <b:column col-sm="4" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>#{product.productName}</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primzary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet></b:thumbnail>
               </b:column>
            </h:dataTable>

            <b:navLink aria-label="Page navigation" styleClass="text-center">
               <ul class="pagination pagination-lg">
                  <li>
                     <b:navLink href="#" aria-label="Previous">
                        <b:column aria-hidden="true">&laquo;</b:column>
                     </b:navLink>
                  </li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li>
                     <b:navLink href="#" aria-label="Next">
                        <b:column aria-hidden="true">&raquo;</b:column>
                     </b:navLink>
                  </li>
               </ul>
            </b:navLink>
         </b:panel>
   </b:carouselItem>
         <b:carouselItem style="width:1540px;height:1000px">
            <b:panel title="On Sale" look="danger">
               <b:column col-sm="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Smile.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:column col-sm="6" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:column col-sm="6" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:column col-sm="6" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:column col-sm="6" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:column col-sm="6" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:navLink aria-label="Page navigation" styleClass="text-center">
                  <ul class="pagination pagination-lg">
                     <li>
                        <b:navLink href="#" aria-label="Previous">
                           <b:column aria-hidden="true">&laquo;</b:column>
                        </b:navLink>
                     </li>
                     <li><a href="#">1</a></li>
                     <li><a href="#">2</a></li>
                     <li><a href="#">3</a></li>
                     <li><a href="#">4</a></li>
                     <li><a href="#">5</a></li>
                     <li>
                        <b:navLink href="#" aria-label="Next">
                           <b:column aria-hidden="true">&raquo;</b:column>
                        </b:navLink>
                     </li>
                  </ul>
               </b:navLink>
            </b:panel>
         </b:carouselItem>
         <b:carouselItem style="width:1540px;height:1000px">
            <b:panel title="Top Rated" look="success">
               <b:column col-sm="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Smile.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:column col-sm="6" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:column col-sm="6" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:column col-sm="6" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:column col-sm="6" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:column col-sm="6" col-md="4">
                  <b:thumbnail>
                     <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                     <f:facet name="caption">
                        <h3>Thumbnail label</h3>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <p align="center">
                           <b:button look="primary" value="View"/>&nbsp;
                           <b:button look="success" value="Add to cart"/>
                        </p>
                     </f:facet>
                  </b:thumbnail>
               </b:column>
               <b:navLink aria-label="Page navigation" styleClass="text-center">
                  <ul class="pagination pagination-lg">
                     <li>
                        <b:navLink href="#" aria-label="Previous">
                           <b:column aria-hidden="true">&laquo;</b:column>
                        </b:navLink>
                     </li>
                     <li><a href="#">1</a></li>
                     <li><a href="#">2</a></li>
                     <li><a href="#">3</a></li>
                     <li><a href="#">4</a></li>
                     <li><a href="#">5</a></li>
                     <li>
                        <b:navLink href="#" aria-label="Next">
                           <b:column aria-hidden="true">&raquo;</b:column>
                        </b:navLink>
                     </li>
                  </ul>
               </b:navLink>
            </b:panel>
         </b:carouselItem>
      <b:carouselItem style="width:1540px;height:1000px">
         <b:panel title="Newest Items" look="warning">
            <b:column col-sm="4">
               <b:thumbnail>
                  <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                  <f:facet name="caption">
                     <h3>Thumbnail label</h3>
                     <p>Smile.</p>
                     <p align="center">
                        <b:button look="primary" value="View"/>&nbsp;
                        <b:button look="success" value="Add to cart"/>
                     </p>
                  </f:facet>
               </b:thumbnail>
            </b:column>
            <b:column col-sm="6" col-md="4">
               <b:thumbnail>
                  <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                  <f:facet name="caption">
                     <h3>Thumbnail label</h3>
                     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                     <p align="center">
                        <b:button look="primary" value="View"/>&nbsp;
                        <b:button look="success" value="Add to cart"/>
                     </p>
                  </f:facet>
               </b:thumbnail>
            </b:column>
            <b:column col-sm="6" col-md="4">
               <b:thumbnail>
                  <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                  <f:facet name="caption">
                     <h3>Thumbnail label</h3>
                     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                     <p align="center">
                        <b:button look="primary" value="View"/>&nbsp;
                        <b:button look="success" value="Add to cart"/>
                     </p>
                  </f:facet>
               </b:thumbnail>
            </b:column>
            <b:column col-sm="6" col-md="4">
               <b:thumbnail>
                  <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                  <f:facet name="caption">
                     <h3>Thumbnail label</h3>
                     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                     <p align="center">
                        <b:button look="primary" value="View"/>&nbsp;
                        <b:button look="success" value="Add to cart"/>
                     </p>
                  </f:facet>
               </b:thumbnail>
            </b:column>
            <b:column col-sm="6" col-md="4">
               <b:thumbnail>
                  <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                  <f:facet name="caption">
                     <h3>Thumbnail label</h3>
                     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                     <p align="center">
                        <b:button look="primary" value="View"/>&nbsp;
                        <b:button look="success" value="Add to cart"/>
                     </p>
                  </f:facet>
               </b:thumbnail>
            </b:column>
            <b:column col-sm="6" col-md="4">
               <b:thumbnail>
                  <img src="logos.jpg" alt="Generic placeholder thumbnail"/>
                  <f:facet name="caption">
                     <h3>Thumbnail label</h3>
                     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                     <p align="center">
                        <b:button look="primary" value="View"/>&nbsp;
                        <b:button look="success" value="Add to cart"/>
                     </p>
                  </f:facet>
               </b:thumbnail>
            </b:column>
            <b:navLink aria-label="Page navigation" styleClass="text-center">
               <ul class="pagination pagination-lg">
                  <li>
                     <b:navLink href="#" aria-label="Previous">
                        <b:column aria-hidden="true">&laquo;</b:column>
                     </b:navLink>
                  </li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li>
                     <b:navLink href="#" aria-label="Next">
                        <b:column aria-hidden="true">&raquo;</b:column>
                     </b:navLink>
                  </li>
               </ul>
            </b:navLink>
         </b:panel>
      </b:carouselItem>
      <b:carouselControl direction="right" >
         <b:commandButton value="previous items" role="button"
                          onclick="$('.wizardPseudoClass').carousel('prev');$('.wizardPseudoClass').carousel('pause'); return false;"
                          look="info" />
      </b:carouselControl>
      <b:carouselControl direction="left">
         <b:commandButton value="next item" role="button" style="position:absolute;right:0px"
                          onclick="$('.wizardPseudoClass').carousel('next');$('.wizardPseudoClass').carousel('pause'); return false;"
                          look="success" />
      </b:carouselControl>
   </b:carousel>
   </h:form>
</h:body>
</html>